<template>
  <div class="addmenus">
    <el-dialog
      :title="showTitle"
      :visible="dialogFormVisible"
      @close="btnCancel"
    >
      <!-- 表单 -->
      <el-form
        ref="addmenussForm"
        :model="addmenussForm"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item label="权限组名称">
          <el-radio-group v-model="addmenussForm.is_point">
            <el-radio :label="false" :disabled="select">菜单</el-radio>
            <el-radio :label="true" :disabled="select">权限点</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select
            ref="select"
            v-model="addmenussForm.id"
            style="width: 35%"
            placeholder="主导航"
            @focus="showTree = true"
          >
            <el-option

              v-model="menuslist.title"
              type="primary"
              class="primary"
              :label="menuslist.title"
            >
              主导航
            </el-option>
            <el-tree
              v-show="showTree"
              ref="tree"
              :data="menuslist"
              :props="defaultProps"
              default-expand-all
              check-on-click-node
              :node-key="menuslist.id"
              @node-click="getCurrentNode"
            />

          </el-select>
        </el-form-item>

        <el-form-item label="权限代码" prop="code">
          <el-input
            v-model="addmenussForm.code"
            style="width: 45%"
            placeholder=" "
          />
        </el-form-item>
        <el-form-item label="权限标题" prop="title">
          <el-input
            v-model="addmenussForm.title"
            style="width: 45%"
            placeholder=" "
          />
        </el-form-item>
      </el-form>
      <!-- footer插槽 -->
      <template v-slot:footer>
        <el-button @click="btnCancel">取消</el-button>
        <el-button type="primary" class="btnOk" @click="btnOk">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { addmenus, editmenus } from '@/api/base/menus'
const defaultItem = {
  is_point: false,
  pid: '',
  code: '',
  title: ''
}
export default {
  name: 'Addmenus',
  props: {
    menuslist: {
      type: Array,
      required: true
    },
    editid: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      addmenussForm: {
        ...defaultItem
      },
      rules: {
        code: [{ required: true, message: '代码不能为空', trigger: 'blur' }],
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }]
      },
      defaultProps: {
        children: 'childs',
        label: 'title'
      },
      showTree: true, // 控制树形的显示或者隐藏
      id: '',
      pid: ''
    }
  },
  computed: {
    showTitle() {
      return this.addmenussForm.id ? '修改菜单' : '创建菜单'
    },
    select() {
      return this.addmenussForm.id ? Boolean(1) : Boolean(0)
    }
  },

  mounted() {},
  created() {
  },
  methods: {
    // 数据加工

    // 渲染表单
    getCurrentNode(currentNode, node) {
      this.addmenussForm.id = currentNode.title
      this.pid = currentNode.pid
      this.id = currentNode.id

      this.showTree = false
      this.$refs.select.blur()
    },

    // 提交
    async btnOk() {
      try {
        await this.$refs.addmenussForm.validate()

        if (this.editid) {
          // 编辑
          this.addmenussForm.id = this.editid
          console.log(this.addmenussForm.id)
          await editmenus(this.addmenussForm)
        } else {
          // 新增
          if (this.addmenussForm.is_point) {
            this.addmenussForm.pid = this.pid
          }
          this.addmenussForm.id = this.id
          await addmenus(this.addmenussForm)
        }
        this.dialogFormVisible = false
        this.$message.success('操作成功')
        this.$emit('updata')
        this.addmenussForm = { ...defaultItem }
        this.$refs.addmenussForm.resetFields()
      } catch (error) {
        console.log(error)
      }
    },
    // 取消
    btnCancel() {
      this.dialogFormVisible = false
      this.addmenussForm = { ...defaultItem }
      this.$refs.addmenussForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.addmenus {
  ::v-deep .el-dialog {
    border-radius: 10px;
    overflow: hidden;
    .el-dialog__header {
      background-color: #409eff;
      .el-dialog__title {
        color: #fff;
      }
      .el-icon-close:before {
        color: #fff;
      }
    }
    .el-dialog__body {
      margin-bottom: -20px;
      .el-form-item__label {
        width: 230px !important;
      }
    }
    .el-dialog__footer {
      padding-top: 0 !important;
      .btnOk {
        margin-right: 60px;
      }
    }
  }
}
</style>
